<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const welcomeBox = ref<HTMLElement | null>(null)
const targetBox = ref<HTMLElement | null>(null)
const observers: IntersectionObserver[] = []
// 测试git
// 初始化所有观察器
const initObservers = () => {
  // 在 initObservers 函数中修改 welcomeView 的观察器
  if (welcomeBox.value) {
    const welcomeObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.intersectionRatio >= 0.5) {
            // 计算目标位置（视口顶部 + 60px）
            const targetPosition = entry.boundingClientRect.top + window.scrollY - 60

            window.scrollTo({
              top: targetPosition,
              behavior: 'smooth',
            })
          }
        })
      },
      {
        threshold: [0.5],
        rootMargin: '0px',
      },
    )
    welcomeObserver.observe(welcomeBox.value)
    observers.push(welcomeObserver)
  }
  // 观察 third 盒子（原有逻辑）
  if (targetBox.value) {
    const thirdObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.intersectionRatio >= 0.5) {
            entry.target.scrollIntoView({
              behavior: 'smooth',
              block: 'start',
            })
          }
        })
      },
      {
        threshold: [0.5],
        rootMargin: '0px',
      },
    )
    thirdObserver.observe(targetBox.value)
    observers.push(thirdObserver)
  }
}

// 组件卸载时清除所有观察器
onUnmounted(() => {
  observers.forEach((observer) => observer.disconnect())
})

onMounted(() => {
  initObservers()
})

// 保持原有的滚动到底部函数
const scrollToBottom = () => {
  window.scrollTo({
    top: document.body.scrollHeight,
    behavior: 'smooth',
  })
}
</script>

<template>
  <div class="all">
    <div class="welcomeView" ref="welcomeBox">
      <div class="picture">
        <div class="setP"><img src="../../pictures/sduLogo.jpg" /></div>
      </div>
      <div class="itemA">
        <div class="right">
          <div class="welcome"><h1>Welcome</h1></div>
          <div class="university">
            <h1 class="sdua">山东大学</h1>
            <h1 class="sdub">「齐鲁交通学院」</h1>
          </div>
          <div class="eight">
            <h2>气有浩然，学无止境</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="second" @click="scrollToBottom">
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="arrow-down-bold"
      >
        <!-- Element Plus 官方路径 -->
        <path
          d="M5.293 9.293a1 1 0 0 1 1.414 0L12 14.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414z"
          fill="currentColor"
          class="arrow-head"
        />
      </svg>
    </div>
    <div class="third" ref="targetBox">
      <div class="tBody">
        <span><h1 class="tTitle">工程应用案例</h1></span>
        <span><h2 class="detail">基于深度学习的灾害智能诊断算法</h2> </span>
        <div class="tKey">
          <!-- 循环生成多个子盒子 -->
          <div class="tKey-item"></div>
          <div class="tKey-item"></div>
          <div class="tKey-item"></div>
          <div class="tKey-item"></div>
          <div class="tKey-item"></div>
          <div class="tKey-item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.all {
  /* 确保顶级容器没有限制宽度 */
  width: 100%;
  overflow-x: hidden; /* 防止横向滚动 */
}
.welcomeView {
  width: 100%;
  display: flex;
  /* background-color: aquamarine; */
  scroll-margin-top: 60px;
}

.picture {
  width: 52%;
}

.setP {
  position: relative;
  height: 85vh;
  width: 100%;
}

.setP img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过位移实现精确居中 */
  width: 350px;
  height: 350px;
  max-width: 100%;
  max-height: 100%;
}

.itemA {
  width: 48%;
  /* background-color: aqua; */
}

.right {
  /* background-color: aquamarine; */
  position: relative;
  top: 35%;
  left: 0;
  height: 85vh;
  width: 100%;
}
.welcome {
  font-size: 25px;
}

.university {
  display: flex;
  /* background-color: blue; */
  margin-top: 20px;
}

.sdua {
  font-size: 60px;
}

.sdub {
  margin-top: 30px;
  margin-left: 20px;
}

.eight {
  margin-top: 10px;
  color: #848484;
}

.second {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 根据需要设置宽度 */
  height: calc(15vh - 60px);
  /* 如果是在固定尺寸容器中，可以这样设置： */
  /* height: 200px;       /* 示例高度 */
  /* border: 1px solid #ddd; /* 可视化容器边界 */
  min-width: 100%; /* 防止被压缩 */
  cursor: pointer; /* 确保鼠标指针变成手型 */
}

.second::after {
  content: '';
  position: absolute;
  top: 92%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* background: rgba(0,255,0,0.1); 调试时可开启 */
}

.arrow-down-bold {
  width: 30px;
  height: 30px;
  pointer-events: none;
}

/* 复合动画：呼吸灯 + 上下浮动 */
.arrow-down-bold .arrow-head {
  animation:
    breathing 3s ease-in-out infinite,
    floating 4s ease-in-out infinite;
}

/* 悬停时静止 */
.arrow-down-bold:hover .arrow-head {
  animation-play-state: paused;
  opacity: 1;
  transform: translateY(0);
}

/* 呼吸灯效果 */
@keyframes breathing {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* 上下浮动效果（更柔和的运动） */
@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.third {
  width: 100vw;
  height: calc(100vh - 80px);
  /* background-color: aquamarine; */
}

.tBody {
  width: 100%;
  height: 100%;
  padding-top: 80px;

  padding-right: 80px;
  /* background-color: blueviolet; */
}

.tTitle {
  font-size: 24px;
  padding-left: 80px;
}
.detail {
  font-size: 15px;
  color: #828282;
  padding-left: 80px;
  margin-bottom: 10px;
}

.tKey {
  /* Flex 容器设置 */
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 16px; /* 盒子间距 */
  /* padding: 16px; */
  /* background: #f5f5f5; */
  border-radius: 8px;
  padding-left: 75px;
}

.tKey-item {
  /* Flex 项目设置 */
  flex: 0 0 calc(30% - 16px); /* 三分之一的宽度减去 gap 的补偿 */
  background: #f5f5f5;
  border-radius: 6px;
  margin: 10px;
  /* padding: 20px; */
  width: calc(30% - 16px);
  height: 260px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;

  /* 可选：固定高度 */
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 原有样式保持不变 */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 响应式调整 */
@media (max-width: 600px) {
  .tKey-item {
    flex: 0 0 calc(50% - 8px); /* 小于768px时一行两个 */
  }
}

@media (max-width: 300px) {
  .tKey-item {
    flex: 0 0 100%; /* 小于480px时一行一个 */
  }
}

.tKey-item:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
</style>
